<!DOCTYPE html>
<html>
    <head>
        <title>新风格</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="../avalon.js"></script>
        <script>
            var model = avalon.define({
                $id: "ms-class",
                toggle: true,
                click: function(e) {
                    model.toggle = !model.toggle
                }
            })
        </script>
        <style>
            .test{
                width:100px;
                height:100px;
                border:1px solid red;
                color:red;
                -webkit-user-select: none;  /* Chrome all / Safari all */
                -moz-user-select: none;     /* Firefox all */
                -ms-user-select: none;      /* IE 10+ */
                -o-user-select: none;
                user-select: none;          
            }
            .aaa{
                color:blue;
                border:1px solid blue;
            }
        </style>
    </head>
    <body ms-controller="ms-class">
        <div class="test" ms-class="aaa:toggle" ms-click="click">点我</div>
        <div  ms-class="aaa"  ms-class-1="bbb"  ms-class-2="ccc"> 它的名类是aaa bbb ccc   </div>
        <div  ms-class-2="aaa" ms-class="bbb"  ms-class-1="ccc" >  它的名类是bbb ccc aaa   </div>
        <div  ms-class="bbb"  ms-class-1="aaa"  ms-class-2="ccc">  它的名类是bbb aaa ccc   </div>
        <div  ms-class="xxx yyy zzz" >  它的名类是xxx yyy zzz   </div>
        <div  ms-class="XXX YYY ZZZ:true" >  它的名类是XXX YYY ZZZ    </div>
    </body>
</html>
